<template>
  <div class="card" :style="{ marginTop: `8px` }">
    <a
      class="avatar"
      href="javascript:;"
      @mouseenter="userinfoEnter(true)"
      @mouseleave="userinfoLeave"
      ref="avatar"
    >
      <div class="user_avatar">
        <img :src="content.avatar" alt="头像" class="user_avatar_img" />
        <div class="user_avatar_pendent">
          <img
            :src="content.avatar_pendent"
            alt="边框"
            class="user_avatar_img_out"
          />
        </div>
        <div class="user_avatar_icon"></div>
      </div>
    </a>
    <div class="main_content">
      <div class="uname">
        <a
          href="javascript:;"
          class="pointer"
          :class="content.vip || content.attestation ? 'light' : ''"
          >{{ content.uname }}</a
        >
      </div>
      <div class="detail">
        <a href="javascript:;" class="pointer" v-if="content.type == 'live'"
          >直播了</a
        >
        <a href="javascript:;" class="pointer" v-else>{{
          content.publishDate | timeFilter
        }}</a>
      </div>
      <div class="card_content">
        <!-- 转发动态 -->
        <template v-if="content.type == 'post'">
          <!-- 动态文本内容 -->
          <TextContent :content="content.content" />
          <!-- 转发内容 -->
          <div class="post_content repost">
            <div class="original_card_content">
              <div class="up_info">
                <a
                  class="up_info_avatar"
                  :style="{
                    backgroundImage: ` url(${content.postContent.upInfo.avatar})`,
                  }"
                ></a>
                <a class="up_info_name" data-userinfo-popup-inited="true">{{
                  content.postContent.upInfo.uname
                }}</a>
                <div class="up_info_tip">
                  的{{ content.postContent.tip | upInfoTipFilter }}
                </div>
              </div>
              <!-- 动态文本内容 -->
              <TextContent :content="content.postContent.content" />
              <ImageBox
                :dataList="content.postContent.imgList"
                v-if="content.postContent.tip == 'img'"
              />
              <LiveContent
                v-if="content.postContent.tip == 'live'"
                :liveMsg="content.postContent.liveMsg"
              />
              <VideoContent
                v-if="content.postContent.tip == 'video'"
                :videoMsg="content.postContent.videoMsg"
              />
              <ArticalContent
                v-if="content.postContent.tip == 'artical'"
                :articalMsg="content.postContent.articalMsg"
              />
              <VoteContent
                v-if="content.postContent.voteMsg"
                :voteMsg="content.postContent.voteMsg"
              />
            </div>
          </div>
        </template>
        <!-- 非转发动态 -->
        <div class="post_content" v-else>
          <div class="original_card_content">
            <!-- 动态文本内容 -->
            <TextContent :content="content.content" v-if="content.content" />
            <ImageBox
              :dataList="content.imgList"
              v-if="content.type == 'img'"
            />
            <LiveContent
              :liveMsg="content.liveMsg"
              v-if="content.type == 'live'"
            />
            <VideoContent
              v-if="content.type == 'video'"
              :videoMsg="content.videoMsg"
            />
            <ArticalContent
              v-if="content.type == 'artical'"
              :articalMsg="content.articalMsg"
            />
            <VoteContent v-if="content.voteMsg" :voteMsg="content.voteMsg" />
          </div>
        </div>
      </div>
      <div class="button_bar">
        <div class="button" @click="openForw">
          <div class="text_bar" :class="forwShow ? 'on' : ''">
            <i class="iconfont icon-24gl-repost"></i>
            <span class="text">{{ content.status.retraNum || "转发" }}</span>
          </div>
        </div>
        <div class="button" @click="openCommentBox()">
          <div class="text_bar" :class="commentShow ? 'on' : ''">
            <i class="iconfont icon-pinglun"></i>
            <span class="text">{{ content.status.commNum || "评论" }}</span>
          </div>
        </div>
        <div class="button">
          <div
            class="text_bar"
            @click="addConditionLike(content)"
            :class="content.getLike ? 'on' : ''"
          >
            <i class="iconfont icon-dianzan" v-if="content.getLike"></i>
            <i class="iconfont icon-good" v-else></i>
            <span class="text">{{ content.status.likeNum || "点赞" }}</span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="card_decorator"
      :style="{
        backgroundImage: `url(${content.decorator.imgUrl})`,
      }"
      :title="content.decorator.title"
    ></div>
    <div class="more_button more_icon" @click="openMore(content)">…</div>
    <div class="more_panel" v-if="content.more_panel">
      <p>取消关注</p>
      <p>举报</p>
    </div>
    <div class="panel_area" v-show="commentShow">
      <div class="bb_comment">
        <div class="reply_notice"></div>
        <div class="comment_header">
          <ul class="tab_order">
            <li
              class="default_sort"
              :class="sortType == 'all' ? 'on' : ''"
              @click="sortTypeTab('all')"
            >
              全部评论
            </li>
            <li
              class="hot_sort"
              :class="sortType == 'hot' ? 'on' : ''"
              @click="sortTypeTab('hot')"
            >
              按热度排序
            </li>
            <li
              class="data_sort"
              :class="sortType == 'time' ? 'on' : ''"
              @click="sortTypeTab('time')"
            >
              按时间排序
            </li>
          </ul>
          <div class="header_interaction"></div>
        </div>
        <CommentSend
          :comObj="content"
          @openEmojiBox="openEmojiBox(content)"
          @hiddenEmojiBox="hiddenEmojiBox(content)"
          :allowRepost="true"
        />
        <div class="comment_list has_limit">
          <div
            class="list_item reply_wrap"
            v-if="commentList"
            v-for="comment in commentList"
          >
            <div class="user_face">
              <a href="javascript:;">
                <div class="avatar">
                  <img class="avatar_img" :src="comment.avatar" />
                  <div class="avatar_pendent">
                    <img
                      class="avatar_pendent_img"
                      :src="comment.avatar_pendent"
                    />
                  </div>
                </div>
              </a>
            </div>
            <div class="con">
              <div class="user">
                <a
                  class="name"
                  href="javascript:;"
                  :style="[
                    comment.vip
                      ? {
                          color: `#FB7299`,
                        }
                      : {},
                  ]"
                  >{{ comment.uname }}</a
                >
                <a class="level_link" href="javascript:;"
                  ><img
                    class="level"
                    :src="`/static/video/ic_user level_${comment.level}.svg`"
                /></a>
                <div class="nameplate" v-if="comment.nameplate">
                  <a href="javascript:;">
                    <img :src="comment.nameplate.imgUrl" />
                  </a>
                  <div class="nameplate_card">
                    <img
                      class="nameplate_pic"
                      :src="comment.nameplate.imgUrl"
                    />
                    <div class="nameplate_text">
                      <p class="n_name">{{ comment.nameplate.name }}</p>
                      <p class="n_title" :title="comment.nameplate.title">
                        {{ comment.nameplate.title }}
                      </p>
                      <p class="n_type">
                        <span>{{ comment.nameplate.type }}</span>
                        <a href="javascript:;"> 查看全部>> </a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="sailing">
                  <img
                    class="sailing_img"
                    :src="comment.sailing.imgUrl"
                    alt=""
                  />
                  <div class="sailing_info">
                    NO.
                    <br />
                    {{ comment.sailing.info }}
                  </div>
                </div>
              </div>
              <p class="text" v-html="comment.content"></p>
              <div class="info">
                <span class="time">{{ comment.time | timeFilter }}</span>
                <span
                  class="like"
                  @click="addCommentLike(comment)"
                  :class="comment.getLike ? 'on' : ''"
                >
                  <i class="iconfont icon-dianzan" v-if="comment.getLike"></i>
                  <i class="iconfont icon-good" v-else></i>
                  <span>{{ comment.likeNum || "" }}</span>
                </span>
                <span
                  class="hate"
                  @click="addCommentHate(comment)"
                  :class="comment.getHate ? 'on' : ''"
                >
                  <i
                    class="iconfont icon-diancai-xuanzhong"
                    v-if="comment.getHate"
                  ></i>
                  <i class="iconfont icon-diancai" v-else></i>
                </span>
                <span class="reply btn-hover" @click="replyComment(comment)"
                  >回复</span
                >
                <div class="operation more_opeartion">
                  <div class="spot" @click="openMore(comment, true)">
                    <i class="iconfont icon-gengduo"></i>
                  </div>
                  <div
                    class="opear_list"
                    v-show="comment.more_panel"
                    @mouseleave="openMore(comment)"
                  >
                    <ul>
                      <li class="blacklist">加入黑名单</li>
                      <li class="report">举报</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="reply_box"></div>
              <div class="paging_box"></div>
              <CommentSend
                :comObj="comment"
                v-if="comment.replyShow"
                :placeholder="`回复 @${comment.uname}: `"
                @openEmojiBox="openEmojiBox(content)"
                @hiddenEmojiBox="hiddenEmojiBox(content)"
              />
            </div>
          </div>
        </div>
        <div class="bottom_page">
          <a href="javascript:;">查看更多评论</a>
        </div>
      </div>
      <EmojiBox :emojiBoxShow="emojiBoxShow" />
    </div>
    <div class="panel_area" v-show="forwShow">
      <div class="forw_area">
        <div class="forw_main">
          <div class="forw_send">
            <div class="forw_face">
              <img class="forw_head" :src="userInfo.avatar" />
            </div>
            <div class="textarea_container">
              <div
                class="textarea_content"
                placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"
                :class="[
                  forwInputFocus ? 'focus' : '',
                  contentLen > 0 ? '' : 'placeholder-shown',
                ]"
              >
                <div
                  class="textarea"
                  contenteditable="true"
                  spellcheck="false"
                  ref="forwInput"
                  @focus="forwInputFocus = true"
                  @blur="forwInputFocus = false"
                  @input="forwInput"
                  @compositionstart="compositionstart"
                  @compositionend="compositionend"
                ></div>
              </div>
              <div class="at_popup"></div>
              <div class="comm_tool f_clear">
                <div class="comm_emoji f_left" @click="openEmoji">
                  <i class="iconfont icon-biaoqing"></i>
                  <span class="comm_text">表情</span>
                  <transition name="emojiboxForw">
                    <EmojiBoxForw
                      v-if="emojiShow"
                      @close="closeEmoji"
                      @inputBoxFocus="forwInputOnFocus"
                      @inputEmoji="inputEmoji"
                    />
                  </transition>
                </div>
                <div class="comm_submit f_right">转发</div>
                <div class="comm_word f_right">
                  <span :class="contentLen > 233 ? 'exceed' : ''">{{
                    contentLen
                  }}</span>
                  <span>/233</span>
                </div>
              </div>
            </div>
          </div>
          <div class="forw_list" v-if="forwList.length">
            <div class="dynamic_list_item_wrap" v-for="item in forwList">
              <div class="forw_face" data-userinfo-popup-inited="true">
                <a
                  class="c_pointer"
                  :href="`//space.bilibili.com/${item.uid}/dynamic`"
                >
                  <img :src="item.avatar" />
                </a>
              </div>
              <div class="item_default">
                <div class="item_user">
                  <a
                    class="user_name c_pointer"
                    data-userinfo-popup-inited="true"
                    >{{ item.uname }}</a
                  >
                </div>
                <div class="text">{{ item.info.content }}</div>
                <div class="info">
                  <span class="time f_left">{{
                    item.info.time | timeFilter
                  }}</span>
                  <a class="forw_submit f_right" @click="forw(item)">转发</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="forw_more">
          <a class="more">查看更多转发</a>
        </div>
      </div>
    </div>
    <UserinfoWrapper
      :top="userInfo_top"
      :left="48"
      v-if="userinfoShow"
      :uid="content.uid"
      @show="userinfoEnter"
      @hidden="userinfoLeave"
      @loadend="loadend"
    />
  </div>
</template>

<script>
import CommentSend from "./component/commentSend/index.vue";
import EmojiBox from "./component/emojiBox/index.vue";
import EmojiBoxForw from "./component/emojiBoxForw/index.vue";
import ImageBox from "./component/imageBox";
import TextContent from "./component/textContent";
import LiveContent from "./component/liveContent";
import VideoContent from "./component/videoContent";
import ArticalContent from "./component/articalContent";
import VoteContent from "./component/voteContent";
import UserinfoWrapper from "./component/userinfoWrapper";
export default {
  data() {
    return {
      userInfo: {
        uname: "言言_Official",
        uid: "140686110",
        avatar: "/static/video/avatar.webp",
        avatar_pendent: "/static/video/avatar_pendent.webp",
        vip: false,
        nameplate: {
          imgUrl: "/static/video/nameplate_img.webp",
          title: "当前持有粉丝勋章最高等级>=15级",
          name: "有爱大佬",
          type: "普通勋章",
        },
        level: 6,
        sailing: {
          imgUrl: "/static/video/sailing_img.webp",
          info: "1204829",
        },
      },

      lastOpera: null,
      lastReply: null,

      sortType: "", //查看评论类型：hot/time

      commentShow: false, //显示评论内容
      commentList: [],
      commentList_hot: [],
      commentList_time: [],

      forwList: [], //转发列表
      forwShow: false, //显示转发内容
      $forwInput: null, //转发输入框对象
      forwInputFocus: false,
      forwContent: "", //转发输入框内容
      contentLen: 0, //转发输入框内容字数
      forwInputType: false, //检测是否为输入法输入

      emojiShow: false,

      emojiBoxShow: false, //评论区表情框

      userinfoShow: false, //动态发布者的信息框
      userinfoShowTimeout: null, //触发定时器
      userInfo_top: 0, //
      $avatar: null,
    };
  },
  props: {
    content: {
      typeof: Object,
      required: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$avatar = this.$refs.avatar;
    });
  },
  methods: {
    // 显示发布者个人信息框
    /**
     * @type 判断是否为头像触发
     */
    userinfoEnter(type) {
      if (this.userinfoShowTimeout) {
        clearTimeout(this.userinfoShowTimeout);
        this.userinfoShowTimeout = null;
      }
      this.userinfoShowTimeout = setTimeout(() => {
        this.userinfoShow = true;
      }, 300);
      if (type && !this.userinfoShow) {
        let { screenHeight } = uni.getSystemInfoSync();
        let clientY = this.getCurrentHeight();
        if (clientY > screenHeight * 0.4) {
          this.userInfo_top = -72;
        } else {
          this.userInfo_top = 72;
        }
      }
    },
    // 隐藏发布者个人信息框
    userinfoLeave() {
      clearTimeout(this.userinfoShowTimeout);
      this.userinfoShowTimeout = null;
      if (this.userinfoShow) {
        this.userinfoShowTimeout = setTimeout(() => {
          this.userinfoShow = false;
        }, 300);
      }
    },
    getCurrentHeight() {
      return (
        this.$avatar.offsetParent.offsetTop +
        this.$avatar.offsetTop -
        document.documentElement.scrollTop
      );
    },
    loadend(top) {
      if (this.userInfo_top < 0) {
        this.userInfo_top = -top + 16;
      }
    },
    // 转发
    forw(item) {
      let { uname } = item;
      let { content } = item.info;
      let text = `//@${uname}:${content}`;
      this.$forwInput.textContent = text;
      this.forwInputOnFocus();
      this.$nextTick(() => {
        this.getContentLen();
        this.getForwContent();
      });
    },
    // 获取转发列表数据
    getForwList() {
      this.forwList = [
        {
          avatar: "/static/video/atup_avatar3.webp",
          uname: "yoo一凡",
          uid: "2227911",
          info: {
            time: "2022-2-17 11:01",
            content: "呐呐呐~❤",
          },
        },
        {
          avatar: "/static/video/atup_avatar1.webp",
          uname: "贝噶王",
          uid: "168296928",
          info: {
            time: "2022-2-17 11:01",
            content: "呐呐呐~❤",
          },
        },
        {
          avatar: "/static/video/atup_avatar2.webp",
          uname: "大街上▍逃竄的o_熊貓",
          uid: "513930",
          info: {
            time: "2022-2-17 11:01",
            content: "呐呐呐~❤",
          },
        },
        {
          avatar: "/static/video/atup_avatar0.webp",
          uname: "榄橄最后防线w",
          uid: "301401873",
          info: {
            time: "2022-2-17 11:01",
            content: "呐呐呐~❤",
          },
        },
        {
          avatar: "/static/video/avatar.webp",
          uname: "言言_Official",
          uid: "140686110",
          info: {
            time: "2022-2-17 11:01",
            content: "呐呐呐~❤",
          },
        },
      ];
    },
    // 插入表情文字
    inputEmoji(data) {
      let content = data.title || data.text;
      let range = getSelection().getRangeAt(0);
      let { startContainer, startOffset, endOffset } = range;
      let textContent = startContainer.data;
      let textNode = document.createTextNode(content);
      if (!textContent || startOffset == endOffset) {
        range.insertNode(textNode);
        range.collapse(false);
      } else {
        let startText = textContent.slice(0, startOffset);
        let endText = textContent.slice(endOffset);
        let startNode = document.createTextNode(startText);
        let endNode = document.createTextNode(endText);
        let docF = document.createDocumentFragment();
        docF.append(startNode);
        docF.append(textNode);
        docF.append(endNode);
        startContainer.parentNode.replaceChild(docF, startContainer);
        this.setRange(endNode, 0);
      }
      this.$forwInput.normalize();
      this.$nextTick(() => {
        this.getContentLen();
        this.getForwContent();
      });
    },
    // 设置光标位置
    setRange(node, offset) {
      let range = document.createRange();
      range.selectNodeContents(node);
      range.setStart(node, offset);
      range.setEnd(node, offset);
      range.collapse(false);
      let sel = getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    },
    // 监视输入法开始输入
    compositionstart() {
      this.forwInputType = true;
    },
    // 监视输入法结束输入
    compositionend() {
      this.forwInputType = false;
      this.$nextTick(() => {
        this.getContentLen();
        this.getForwContent();
      });
    },
    // 转发输入
    forwInput() {
      if (this.forwInputType) return;
      this.$nextTick(() => {
        this.getContentLen();
        this.getForwContent();
      });
    },
    // 转发输入框获取焦点
    forwInputOnFocus() {
      if (!this.$forwInput) return;
      this.$forwInput.focus();
    },
    // 获取转发输入框节点对象
    getForwInputNode() {
      if (this.$forwInput) return;
      this.$forwInput = this.$refs.forwInput;
    },
    // 删除转发输入框节点对象
    deleteForwInputNode() {
      this.$forwInput = null;
    },
    // 计算转发内容长度
    getContentLen() {
      this.contentLen = this.$forwInput.innerText.replace(/\n\n/, "\n").length;
    },
    // 获取转发内容
    getForwContent() {
      this.forwContent = this.$forwInput.innerText;
    },
    // 打开转发
    openForw() {
      this.commentShow = false;
      if (this.forwShow) {
        this.hiddenForw();
        return;
      }
      this.getForwList();
      this.forwShow = true;
      this.getForwInputNode();
      this.$nextTick(() => {
        this.forwInputOnFocus();
      });
    },
    // 隐藏转发
    hiddenForw() {
      this.forwShow = false;
      this.deleteForwInputNode();
    },
    // 打开评论
    openCommentBox() {
      this.forwShow = false;
      if (this.commentShow) {
        this.hiddenCommentBox();
        return;
      }
      this.commentShow = true;
      if (!this.sortType) {
        this.$set(this, "sortType", "hot");
        // 发送请求获取评论数据
        this.getCommentList("hot");
      }
    },
    // 隐藏评论
    hiddenCommentBox() {
      this.commentShow = false;
    },
    // 打开转发表情框
    openEmoji() {
      this.emojiShow = true;
      this.forwInputOnFocus();
    },
    // 关闭转发表情框
    closeEmoji() {
      this.emojiShow = false;
    },
    // 打开回复
    replyComment(item) {
      if (this.lastReply == item) {
        if (item.replyShow) {
          this.$set(item, "replyShow", false);
        } else {
          this.$set(item, "replyShow", true);
        }
        this.lastReply = null;
      } else {
        if (this.lastReply) {
          this.$set(this.lastReply, "replyShow", false);
        }
        this.$set(item, "replyShow", true);
        this.lastReply = item;
      }
    },
    // 动态点赞
    addConditionLike(item) {
      let { likeNum } = item.status;
      if (item.getLike) {
        this.$set(item, "getLike", false);
        this.$set(item.status, "likeNum", likeNum - 1);
      } else {
        this.$set(item, "getLike", true);
        this.$set(item.status, "likeNum", likeNum + 1);
      }
      // 发送请求
    },
    // 评论点踩
    addCommentHate(item) {
      if (item.getHate) {
        this.$set(item, "getHate", false);
      } else {
        this.$set(item, "getHate", true);
        this.$set(item, "getLike", false);
        this.$set(item, "likeNum", item.likeNum - 1);
      }
      // 发送请求
    },
    // 评论点赞
    addCommentLike(item) {
      let { likeNum } = item;
      if (item.getLike) {
        this.$set(item, "getLike", false);
        this.$set(item, "likeNum", likeNum - 1);
      } else {
        this.$set(item, "getLike", true);
        this.$set(item, "getHate", false);
        this.$set(item, "likeNum", likeNum + 1);
      }
      // 发送请求
    },
    // 获取评论数据
    getCommentList(type) {
      let res;
      if (type == "hot") {
        // 如果没有获取过，则获取数据
        if (this.commentList_hot.length == 0) {
          res = [
            {
              uname: "yoo一凡",
              uid: "2227911",
              avatar: "/static/video/atup_avatar3.webp",
              avatar_pendent: "/static/video/atup_avatar3_pendent.webp",
              vip: true,
              nameplate: null,
              level: 6,
              sailing: {
                imgUrl: "/static/video/sailing_img.webp",
                info: "1204829",
              },
              content: "芜湖~~耶~~<br/><br/>",
              commentId: "2227911_001",
              time: "2022-1-20 8:09:22",
              likeNum: 60,
            },
            {
              uname: "言言_Official",
              uid: "01048923",
              avatar: "/static/video/avatar.webp",
              avatar_pendent: "/static/video/avatar_pendent.webp",
              vip: false,
              nameplate: {
                imgUrl: "/static/video/nameplate_img.webp",
                title: "当前持有粉丝勋章最高等级>=15级",
                name: "有爱大佬",
                type: "普通勋章",
              },
              level: 6,
              sailing: {
                imgUrl: "/static/video/sailing_img.webp",
                info: "1204829",
              },
              commentId: "01048923_002",
              content: "芜湖起飞耶~~",
              time: "2022-1-20 16:59:22",
              likeNum: 30,
            },
          ];
          this.$set(this, "commentList_hot", res);
        } else {
          this.$set(this, "commentList", this.commentList_hot);
          return;
        }
      } else {
        if (this.commentList_time.length == 0) {
          res = [
            {
              uname: "yoo一凡",
              uid: "2227911",
              avatar: "/static/video/atup_avatar3.webp",
              avatar_pendent: "/static/video/atup_avatar3_pendent.webp",
              vip: true,
              nameplate: null,
              level: 6,
              sailing: {
                imgUrl: "/static/video/sailing_img.webp",
                info: "1204829",
              },
              content: "开玩笑，我超勇的好不好，超会喝的<br/><br/>",
              commentId: "2227911_001",
              time: "2022-1-20 8:09:22",
              likeNum: 60,
            },
            {
              uname: "言言_Official",
              uid: "01048923",
              avatar: "/static/video/avatar.webp",
              avatar_pendent: "/static/video/avatar_pendent.webp",
              vip: false,
              nameplate: {
                imgUrl: "/static/video/nameplate_img.webp",
                title: "当前持有粉丝勋章最高等级>=15级",
                name: "有爱大佬",
                type: "普通勋章",
              },
              level: 6,
              sailing: {
                imgUrl: "/static/video/sailing_img.webp",
                info: "1204829",
              },
              commentId: "01048923_002",
              content: "让我访问！",
              time: "2022-1-20 16:59:22",
              likeNum: 30,
            },
          ];
          this.$set(this, "commentList_time", res);
        } else {
        }
        this.$set(this, "commentList", this.commentList_time);
        return;
      }
      this.$set(this, "commentList", res);
    },
    // 获取当前时间
    getTime() {
      let date = new Date();
      const YEAR = date.getFullYear();
      const MONTH = date.getMonth() + 1;
      const DAY = date.getDate();
      const HOUR = date.getHours();
      const MIN = date.getMinutes();
      const SEC = date.getSeconds();
      return `${YEAR}-${MONTH}-${DAY} ${HOUR}:${MIN}:${SEC}`;
    },
    // 打开转发表情
    openEmojiBox() {
      this.$set(this, "emojiBoxShow", true);
    },
    // 隐藏转发表情
    hiddenEmojiBox() {
      this.$set(this, "emojiBoxShow", false);
    },
    // 切换评论栏
    sortTypeTab(type) {
      if (type == this.sortType) return;
      this.$set(this, "sortType", type);
      // 发送请求获取评论数据
      this.getCommentList(type);
    },
    // 点击更多
    openMore(item, type = false) {
      if (item && item.more_panel) {
        this.$set(item, "more_panel", false);
      } else {
        this.$set(item, "more_panel", true);
      }
      if (type) {
        if (this.lastOpera == item) {
          return;
        } else if (this.lastOpera?.more_panel) {
          this.$set(this.lastOpera, "more_panel", false);
        }
        this.lastOpera = item;
      }
    },
  },
  components: {
    CommentSend,
    EmojiBox,
    EmojiBoxForw,
    ImageBox,
    TextContent,
    LiveContent,
    VideoContent,
    ArticalContent,
    VoteContent,
    UserinfoWrapper,
  },
  filters: {
    timeFilter(time) {
      let now = new Date().getTime() / 1000;
      let sendTime = new Date(time).getTime() / 1000;
      let dif = now - sendTime;
      if (dif >= 0 && dif < 60) {
        return "刚刚";
      } else if (dif >= 60 && dif < 3600) {
        return `${Math.floor(dif / 60)}分钟前`;
      } else if (dif >= 3600 && dif < 3600 * 24) {
        return `${Math.floor(dif / 3600)}小时前`;
      } else if (dif >= 3600 * 24 && dif < 3600 * 24 * 3) {
        return `${Math.floor(dif / 3600 / 24)}天前`;
      }
      return time;
    },
    upInfoTipFilter(tip) {
      switch (tip) {
        case "img":
          return "图片";
        case "text":
          return "动态";
        case "live":
          return "直播";
        case "video":
          return "投稿视频";
        case "artical":
          return "文章";
      }
    },
  },
};
</script>

<style lang="scss">
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
.f_clear {
  &::after,
  &::before {
    content: "";
    display: table;
    clear: both;
  }
}
.c_pointer {
  cursor: pointer;
}
.text {
  letter-spacing: 0.5px;
}
.p_rel {
  position: relative;
}
.description {
  max-width: 100%;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 22px;
  word-wrap: break-word;
}
.content_full {
  width: 100%;
  word-break: break-word;
  word-wrap: break-word;
}
.dynamic_link {
  border-radius: 4px;
}
.hover_bg {
  &:hover {
    background-color: #dde2eb;
  }
}
.content {
  display: block;
  color: inherit;
  padding-right: 10px;
}
.content_full {
  word-break: break-word;
  word-wrap: break-word;
  &.hidden {
    display: none;
    height: 0;
  }
}
.content_ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  word-wrap: break-word;
  &.hidden {
    display: none;
    height: 0;
  }
}
.expand_btn {
  color: #178bcf;
  line-height: 22px;
  cursor: pointer;
  display: inline-block;
  &:hover {
    color: #00b5e5;
  }
}
.card {
  min-width: 632px;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
  top: 0;
  // overflow: hidden;
  .avatar {
    width: 72px;
    height: 72px;
    display: block;
    position: absolute;
    font-size: 12px;
    color: #222;
    text-decoration: none;
    // background: orange;
    left: 8px;
    top: 8px;
    .user_avatar {
      width: 72px;
      height: 72px;
      position: relative;
      // background: orange;
      .user_avatar_img {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 16px;
        left: 16px;
        border-radius: 50%;
        z-index: 1;
      }
      .user_avatar_pendent {
        position: absolute;
        z-index: 1;
        width: 72px;
        height: 72px;
        .user_avatar_img_out {
          width: 72px;
          height: 72px;
        }
      }
    }
  }
  .main_content {
    // height: 462px;
    margin-left: 88px;
    padding-top: 27px;
    width: 534px;
    .uname {
      color: #222;
      font-size: 16px;
      display: inline-block;
      .pointer {
        text-decoration: none;
        color: #222;
        &:hover {
          color: #00b5e5;
        }
        &.light {
          color: #fb7299;
        }
      }
    }
    .detail {
      color: #99a2aa;
      font-size: 12px;
      padding-top: 4px;
      .pointer {
        text-decoration: none;
        color: #99a2aa;
        transition: color 400ms;
        &:hover {
          color: #fb7299;
        }
      }
    }
    .card_content {
      margin-top: 10px;
      min-height: 15px;
      width: 100%;
      .repost {
        position: relative;
        padding: 8px 12px;
        border-radius: 4px;
        margin-left: -12px;
        background-color: #f4f5f7;
        line-height: 22px;
        .up_info {
          width: 100%;
          position: relative;
          .up_info_avatar {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          }
          .up_info_name {
            display: inline-block;
            font-size: 14px;
            color: #00a1d6;
            line-height: 24px;
            vertical-align: top;
            padding: 0 8px;
          }
          .up_info_tip {
            display: inline-block;
            color: #99a2aa;
            font-size: 12px;
            vertical-align: top;
            padding-top: 1px;
          }
        }
      }
    }
    .button_bar {
      height: 48px;
      width: 100%;
      .button {
        display: inline-block;
        height: 48px;
        width: 92px;
        .text_bar {
          cursor: pointer;
          color: #99a2aa;
          .iconfont {
            margin-right: 6px;
          }
          &:hover {
            color: #00b5e5;
          }
          .text {
            font-size: 12px;
            line-height: 48px;
          }
          &.on {
            color: #00b5e5;
          }
        }
      }
    }
  }
  .card_decorator {
    width: 60px;
    height: 30px;
    position: absolute;
    right: 48px;
    top: 18px;
    background-position: center center;
    background-size: 60px 30px;
  }
  .more_button {
    display: inline-block;
    position: absolute;
    right: 12px;
    top: 22px;
    transform: rotate(90deg);
    transform-origin: center center;
    font-size: 20px;
    font-weight: bolder;
    color: #99a2aa;
    cursor: pointer;
    &:hover {
      color: #00a1d6;
    }
  }
  .more_panel {
    width: 94px;
    border-radius: 8px;
    box-shadow: 0 11px 12px 0 rgba(106, 115, 133, 0.12);
    border: solid 1px #e5e9ef;
    font-size: 14px;
    color: #222;
    text-align: center;
    position: absolute;
    right: 4px;
    top: 50px;
    background-color: #fff;
    &::before {
      content: "";
      width: 8px;
      height: 8px;
      background-color: #fff;
      position: absolute;
      right: 18px;
      top: -4px;
      transform: rotate(45deg);
      border: solid 1px #e5e9ef;
    }
    &::after {
      content: "";
      width: 16px;
      height: 8px;
      position: absolute;
      background-color: #fff;
      right: 14px;
      top: 0;
    }
    p {
      cursor: pointer;
      &:hover {
        color: #00b5e5;
      }
    }
    p:last-child {
      padding: 4px 0 18px;
    }
    p:first-child {
      padding: 18px 0 4px;
    }
  }
  .panel_area {
    width: 584px;
    min-height: 200px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    .bb_comment {
      width: 100%;
      .comment_header {
        border-bottom: 1px solid #e5e9ef;
        margin-bottom: 24px;
        .tab_order {
          display: flex;
          flex-direction: row;
          font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #222;
          font-weight: bold;
          .default_sort {
            display: none;
            padding: 8px 0;
            margin-right: 16px;
            position: relative;
            cursor: pointer;
          }
          .hot_sort {
            padding: 8px 0;
            margin-right: 16px;
            position: relative;
            cursor: pointer;
          }
          .data_sort {
            padding: 8px 0;
            margin: 0 16px;
            position: relative;
            cursor: pointer;
          }
          .on {
            color: #00a1d6;
            border-bottom: 1px solid #00a1d6;
            &::after {
              content: "";
              border: solid 3px #00a1d6;
              border-color: transparent transparent #00a1d6 transparent;
              position: absolute;
              left: 50%;
              bottom: 1px;
            }
          }
        }
      }
      .comment_list {
        padding-top: 20px;
        .reply_wrap {
          position: relative;
          .user_face {
            width: 82px;
            margin-top: 24px;
            position: absolute;
            a {
              margin: 0;
              padding: 0;
              .avatar {
                position: relative;
                margin: 0 auto;
                left: 0;
                top: 0;
                .avatar_img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  position: absolute;
                  left: 16px;
                  top: 16px;
                  z-index: 10;
                }
                .avatar_pendent {
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 11;
                  .avatar_pendent_img {
                    width: 72px;
                    height: 72px;
                  }
                }
              }
            }
          }
          .con {
            margin-left: 82px;
            padding: 22px 0 14px;
            border-top: 1px solid #e5e9ef;
            .user {
              font-size: 12px;
              font-weight: bold;
              padding-bottom: 4px;
              word-wrap: break-word;
              display: block;
              line-height: 18px;
              .name {
                color: #6d757a;
              }
              a {
                text-decoration: none;
              }
              .level_link {
                margin-left: 20px;
                .level {
                  width: 22px;
                  height: 22px;
                  display: inline-block;
                  vertical-align: middle;
                }
              }
              .nameplate {
                display: inline-block;
                position: relative;
                margin: 0 8px;
                vertical-align: middle;
                &:hover .nameplate_card {
                  display: flex;
                }
                a {
                  display: inline-block;
                  img {
                    width: 20px;
                    height: 20px;
                  }
                }
                .nameplate_card {
                  display: none;
                  position: absolute;
                  left: 40px;
                  top: 1px;
                  padding: 22px 20px;
                  background-color: #fff;
                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
                  border-radius: 4px;
                  z-index: 5;
                  border: 1px solid #e5e9ef;
                  flex-direction: row;
                  .nameplate_pic {
                    width: 62px;
                    height: 62px;
                  }
                  .nameplate_text {
                    width: 219px;
                    margin-left: 20px;
                    padding-left: 20px;
                    border-left: 1px solid #e5e9ef;
                    font-weight: normal;
                    p {
                      margin: 3px 0;
                    }
                    .n_name {
                      font-size: 14px;
                      font-weight: bold;
                    }
                    .n_title {
                      text-overflow: ellipsis;
                      overflow: hidden;
                    }
                    .n_type {
                      color: #99a2aa;
                      a {
                        float: right;
                        color: #00b5e5;
                        &:hover {
                          color: #00a1d6;
                        }
                      }
                    }
                  }
                }
              }
              .sailing {
                position: absolute;
                right: 0;
                top: 10px;
                user-select: none;
                .sailing_img {
                  height: 48px;
                }
                .sailing_info {
                  display: inline-block;
                  font-family: fanscard;
                  position: absolute;
                  top: 10px;
                  right: 0;
                  color: #ff73bc;
                  word-break: keep-all;
                  font-size: 12px;
                  line-height: 15px;
                  transform: scale(0.7);
                  transform-origin: left top;
                }
              }
            }
            .text {
              font-size: 14px;
              line-height: 20px;
              word-wrap: break-word;
              word-break: break-word;
              white-space: pre-wrap;
              padding: 2px 0;
              user-select: text;
              cursor: text;
            }
            .info {
              margin-top: 6px;
              color: #99a2aa;
              font-size: 12px;
              line-height: 14px;
              .time {
                margin-right: 20px;
                user-select: text;
                cursor: text;
              }
              .like {
                margin-right: 20px;
                cursor: pointer;
                &:hover {
                  color: #00a1d6;
                }
                .iconfont {
                  margin-right: 5px;
                }
                &.on {
                  color: #00a1d6;
                }
              }
              .hate {
                margin-right: 20px;
                cursor: pointer;
                &:hover {
                  color: #00a1d6;
                }
                .iconfont {
                  margin-right: 5px;
                }
                &.on {
                  color: #00a1d6;
                }
              }
              .reply {
                display: inline-block;
                padding: 0 5px;
                border-radius: 5px;
                cursor: pointer;
              }
              .btn-hover {
                &:hover {
                  background-color: #e5e9ef;
                  color: #00a1d6;
                }
              }
              .operation {
                float: right;
                width: 18px;
                margin-top: 5px;
                position: relative;
                .spot {
                  cursor: pointer;
                  &:hover {
                    color: #00a1d6;
                  }
                }
                .opear_list {
                  width: 120px;
                  background-color: #fff;
                  position: absolute;
                  padding: 10px 0;
                  right: 0;
                  z-index: 20;
                  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
                  color: #222;
                  font-size: 14px;
                  border-radius: 4px;
                  .blacklist,
                  .report {
                    padding: 0 15px;
                    height: 36px;
                    line-height: 36px;
                    cursor: pointer;
                    &:hover {
                      background-color: #e5e9ef;
                      color: #00a1d6;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .bottom_page {
        padding: 12px 0 10px;
        border-top: solid 1px #e5e9ef;
        font-size: 14px;
        text-align: center;
        a {
          color: #99a2aa;
          text-decoration: none;
        }
      }
    }
    .forw_area {
      background-color: #fff;
      border-radius: 0 0 4px 4px;
      .forw_main {
        padding-left: 64px;
        .forw_send {
          padding-top: 20px;
          display: flex;
          flex-direction: row;
          .forw_face {
            margin-right: 8px;
            .forw_head {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background-size: 32px 32px;
              background-repeat: no-repeat;
              background-position: center center;
            }
          }
          .textarea_container {
            font-size: 12px;
            position: relative;
            .textarea_content {
              font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
                Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
              margin: 0;
              resize: none;
              display: inline-block;
              background-color: #fff;
              word-wrap: break-word;
              outline: none;
              line-height: 20px;
              border-radius: 4px;
              padding: 5px 2px 0 6px;
              border: 1px solid #e5e9ef;
              font-size: inherit;
              width: 470px;
              min-height: 46px;
              max-height: 180px;
              overflow: hidden;
              &:hover {
                border: 1px solid #00a1d6;
              }
              &.placeholder-shown::before {
                content: attr(placeholder);
                position: absolute;
                top: 5px;
                left: 10px;
                color: #99a2aa;
              }
              &.focus {
                border: 1px solid #00a1d6;
              }
              .textarea {
                position: relative;
                width: 100%;
                top: 0;
                left: 0;
                color: #222;
                -webkit-user-modify: read-write-plaintext-only;
                font-size: 12px;
                min-height: 44px;
                vertical-align: baseline; //文字对齐
                word-break: break-word;
                word-wrap: break-word;
                overflow: auto;
                outline: none;
              }
            }
            .comm_tool {
              padding-top: 4px;
              margin-bottom: 15px;
              .comm_emoji {
                width: 68px;
                line-height: 23px;
                height: 26px;
                border-radius: 4px;
                text-align: center;
                box-sizing: border-box;
                border: 1px solid #e5e9ef;
                background-color: #fff;
                position: relative;
                cursor: pointer;
                &:hover .icon-biaoqing,
                &:hover .comm_text {
                  color: #6d757a;
                }
                .icon-biaoqing {
                  color: #99a2aa;
                  margin-right: 5px;
                  vertical-align: middle;
                }
                .comm_text {
                  color: #99a2aa;
                  vertical-align: middle;
                }
              }
              .comm_submit {
                width: 56px;
                height: 26px;
                text-align: center;
                background-color: #00a1d6;
                border-radius: 4px;
                line-height: 26px;
                color: #fff;
                box-sizing: border-box;
                cursor: pointer;
              }
              .comm_word {
                margin-right: 8px;
                color: #99a2aa;
                line-height: 26px;
                .exceed {
                  color: #fb7299;
                }
              }
            }
          }
        }
        .forw_list {
          .dynamic_list_item_wrap {
            padding: 12px 0 10px;
            border-top: 1px solid #ebeef2;
            display: flex;
            flex-direction: row;
            .forw_face {
              margin-right: 8px;
              img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
              }
            }
            .item_default {
              .item_user {
                font-size: 0;
                .user_name {
                  font-size: 12px;
                  font-weight: 700;
                  line-height: 18px;
                  text-decoration: none;
                  color: #6d757a;
                }
              }
              .text {
                color: #222;
                margin: 0;
                width: 480px;
                line-height: 20px;
                padding: 6px 0 8px;
                font-size: 12px;
                text-shadow: none;
                overflow: hidden;
                word-wrap: break-word;
                word-break: break-word;
              }
              .info {
                & > span {
                  font-size: 12px;
                }
                .time {
                  color: #98a2aa;
                }
                .forw_submit {
                  cursor: pointer;
                  color: #23ade6;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
      .forw_more {
        width: 100%;
        border-top: 1px solid #ebeef2;
        height: 44px;
        line-height: 44px;
        text-align: center;
        .more {
          cursor: pointer;
          font-size: 14px;
          color: #999;
          text-decoration: none;
        }
      }
    }
  }
}
.emojiboxForw-enter,
.emojiboxForw-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
.emojiboxForw-enter-to,
.emojiboxForw-leave {
  opacity: 1;
  transform: translateY(0);
}
.emojiboxForw-enter-active,
.emojiboxForw-leave-active {
  transition: all 0.3s;
}
</style>